<template>
	<view class="container">
		<!-- 店铺页面组件 -->
		<!-- <Page :items="items" /> -->

		<!-- 轮播图 -->
		<view class="bg-image">
			<swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in imgList">
					<image :src="item.image_url" mode=""></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="tab_alcohol">
			<view class="flex flex-x-between">
				<view @click="changeIndex(0)" :class="[index==0?'tab_alcohol_1_a':'tab_alcohol_1']">
					<view class="" v-if="index==0">
						<image src="/static/11.png" style="width: 53rpx;height: 49rpx;" mode=""></image>
					</view>
					<view class="" v-if="index!=0">
						<image src="/static/4.png" style="width: 53rpx;height: 49rpx;" mode=""></image>
					</view>
					<view class="">
						出(卖)
					</view>
				</view>
				<view @click="changeIndex(1)" :class="[index==1?'tab_alcohol_2_a':'tab_alcohol_2']">
					<view class="" v-if="index!=1">
						<image src="/static/2.png" style="width: 53rpx;height: 49rpx;" mode=""></image>
					</view>
					<view class="" v-if="index==1">
						<image src="/static/22.png" style="width: 53rpx;height: 49rpx;" mode=""></image>
					</view>
					<view class="">
						求(购)
					</view>
				</view>
				<view class="tab_alcohol_3" @click="subOpen">
					<view class="">
						<image src="/static/3.png" style="width: 42rpx;height: 38rpx;margin-top: 10rpx;" mode="">
						</image>
					</view>
					<view class="">
						筛选
					</view>
				</view>

				<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup.filter" title="全部筛选" height="1104rpx" @finsh="subFinsh"></filter-popup>
			</view>


			<!-- 酒类列表 -->
			<view class="empty_img">
				<image src="/static/empty.png" mode=""></image>
				<view class="no-content">
					暂无内容
				</view>
			</view>
			<view class="p_t_list" @click="detail">
				<view class="flex">
					<view class="p_img">
						<image src="../../static/wallet.png" mode=""></image>
					</view>
					<view class="m-l w-400">
						<view class="flex flex-x-between">
							<view class="alcohol_name">
								茅台不老酒
							</view>
							<view class="alcohol_price">
								￥100
							</view>
						</view>
						<view class="flex m-t-b-tag">
							<view class="tag1">
								品牌：茅台
							</view>
							<view class="tag2">
								数量：1
							</view>
						</view>
						<view class="flex flex-y-c">
							<view class="alcohol_city">
								<image src="../../static/6.png" mode=""></image>
								太原市
							</view>
							<view class="alcohol_time">
								<image src="../../static/7.png" mode=""></image>
								2022-12-02
							</view>
						</view>
					</view>
				</view>
				<view class="">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setCartTabBadge
	} from '@/core/app'
	import * as Api from '@/api/page'
	import Page from '@/components/page'
	import FilterPopup from "@/components/filter-popup/filter-popup";
	const App = getApp()

	export default {
		components: {
			FilterPopup,
			Page
		},
		data() {
			return {
				// 页面参数
				options: {},
				// 页面属性
				page: {},
				// 页面元素
				items: [],
				imgList: [{
						image_url: '/static/background/user-header2.png'
					},
					{
						image_url: '/static/background/user-header2.png'
					}
				],
				index: '0',
				//筛选表单数据
				filterData: [{
						children: false, //是否有子项
						title: "意向度",
						key: "intention_type", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [{
								title: "一般意向",
								id: 1,
								value: 1,
							},
				 		{
								title: "中意向度",
								id: 2,
								value: 2,
							},
							{
								title: "高意向度",
								id: 3,
								value: 3,
							},
						],
					},
					{
				  children: false, //是否有子项
						title: "手机号码",
						key: "is_bind_phone", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [{
								title: "未绑定",
								value: 0,
							},
							{
								title: "已绑定",
								value: 1,
							},
						],
					},
					{
						children: false, //是否有子项
						title: "企微好友",
						key: "is_work_customer", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [{
								title: "未添加",
								value: 0,
							},
							{
								title: "已添加",
								value: 1,
							},
						],
					},
					{
				  children: true, //是否有子项
				  isRadio: false, //是否单选
						title: "标签内容",
						key: "label", //键名 接收对象名字
						keyValue: "id", //获取的值是哪个
						data: [{
								title: "客户重要程度",
								id: 22,
								children: [{
										title: "一般意向2",
										id: 32,
										value: 1,
									},
									{
										title: "一般意向3",
										id: 12,
										value: 1,
									},
								],
							},
							{
								title: "客户重要程度2",
								id: 122,
								children: [{
										title: "一般意向2",
										id: 43,
										value: 1,
									},
									{
										title: "一般意向3",
										id: 23,
										value: 1,
									},
								],
							},
						],
					},
				], //筛选数据
				filterForm: {}, //选中的表单
				popup:{
					filter:false
				}
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 当前页面参数
			this.options = options
			// 加载页面数据
			this.getPageData();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 更新购物车角标
			// setCartTabBadge()
		},

		methods: {
			detail(){
				uni.navigateTo({
					url:'/pages/detail/index'
				})
			},
			changeIndex(e) {
				console.log(e);
				this.index = e
			},
			subFinsh(){
				this.popup={
					filter:false
				}
				console.log(this.filterForm)
			},
			subOpen(){
				this.popup={
					filter:true
				}
			},
			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */
			getPageData(callback) {
			  const app = this
			  const pageId = app.options.pageId || 0
			  Api.detail(pageId)
			    .then(result => {
			      // 设置页面数据
			      const { data: { pageData } } = result
			      app.page = pageData.page
			      // app.items = pageData.items
			      // 设置顶部导航栏栏
			      // app.setPageBar();
			    })
			    .finally(() => callback && callback())
			},

			/**
			 * 设置顶部导航栏
			 */
			// setPageBar() {
			//   const {
			//     page
			//   } = this
			//   // 设置页面标题
			//   uni.setNavigationBarTitle({
			//     title: page.params.title
			//   });
			//   // 设置navbar标题、颜色
			//   uni.setNavigationBarColor({
			//     frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
			//     backgroundColor: page.style.titleBackgroundColor
			//   })
			// },

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.flex-x-a {
		justify-content: space-around;
	}

	.flex-x-between {
		justify-content: space-between;
	}

	.flex-x-c {
		justify-content: center;
	}

	.flex-y-c {
		align-items: center;
	}

	.container {
		// background: #fff;
	}

	.bg-image {
		swiper {
			display: block;
			height: 404rpx !important;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.tab_alcohol {
		padding: 42rpx 32rpx;
	}

	.p_t_list {
		padding: 32rpx 14rpx;
		background-color: #fff;
		margin-top: 28rpx;
		border-radius: 20rpx;
	}

	.p_img {
		width: 200rpx;
		height: 150rpx;
		background: #FEFEFE;
		border-radius: 10rpx;
	}

	.w-400 {
		width: 400rpx;
	}

	.p_img image {
		width: 100%;
		height: 100%;
	}

	.tag1 {
		background: rgba(1, 100, 234, 0.1);
		border-radius: 20rpx;
		padding: 10rpx 16rpx;
		margin-right: 24rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		color: #0164EA;
		text-align: center;

	}

	.tag2 {
		background: rgba(241, 104, 76, 0.1);
		border-radius: 20rpx;
		padding: 10rpx 16rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		color: #F1684C;
		text-align: center;
	}

	.m-l {
		margin-left: 40rpx;
	}

	.m-t-b-tag {
		margin: 15rpx 0 20rpx 0;
	}

	.alcohol_name {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.alcohol_price {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.alcohol_city {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		display: flex;
		align-items: center;
		margin-right: 80rpx;
	}

	.alcohol_city image {
		width: 26rpx;
		height: 25rpx;
		margin-right: 20rpx;
	}

	.alcohol_time {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		display: flex;
		align-items: center;
	}

	.alcohol_time image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 20rpx;
	}

	.tab_alcohol_1_a {
		width: 220rpx;
		height: 151rpx;
		border-radius: 30rpx;
		background-image: url('/static/1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.tab_alcohol_1 {
		width: 220rpx;
		height: 151rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding-top: 20rpx;
	}

	.tab_alcohol_2 {
		width: 220rpx;
		height: 151rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding-top: 20rpx;
	}

	.tab_alcohol_2_a {
		width: 220rpx;
		height: 151rpx;
		border-radius: 30rpx;
		background-image: url('/static/1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.tab_alcohol_3 {
		width: 220rpx;
		height: 151rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding-top: 20rpx;
	}

	.tab_alcohol_3_a {
		width: 220rpx;
		height: 151rpx;
		border-radius: 30rpx;
		background-image: url('/static/1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	
	
	.empty_img{
		width: 248rpx;
		height: 169rpx;
		margin: 100rpx auto;
		text-align: center;
	}
	.empty_img image{
		width: 100%;
		height: 100%;
	}
	
	.no-content{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #848484;
	}
</style>
